<template>
	<view class="container">
    <view class="title">SKU-CC使用示例</view>
    <sku-cc :specList="specList"
            :skuList="skuList"
            :disable="disable"
            :selectedIndex="selectedIndex"
            v-on:getSelectedIndex="getSelectedIndex"
            v-on:getSelectedSkuObj="getSelectedSkuObj"
            v-slot:sku="{specMap, disable, active, row}">
      <spec-item-default :row="row" :specMap="specMap" :disable="disable" :active="active"></spec-item-default>
    </sku-cc>
	</view>
</template>

<script>
  export default {
    data() {
			return {
        disable: false,
        selectedIndex: -1,
        specList: [
          {
            "id": 1,
            "title": "颜色",
            "specList": [
              {
                "id": 1,
                "title": "红色"
              },
              {
                "id": 2,
                "title": "白色"
              },
              {
                "id": 3,
                "title": "黑色"
              }
            ]
          },
          {
            "id": 2,
            "title": "内存",
            "specList": [
              {
                "id": 4,
                "title": "64G"
              },
              {
                "id": 5,
                "title": "128G"
              }
            ]
          },
          {
            "id": 3,
            "title": "套餐",
            "specList": [
              {
                "id": 6,
                "title": "套餐1"
              },
              {
                "id": 7,
                "title": "套餐2"
              }
            ]
          }
        ],
        skuList: [
          {
            "id": 1,
            "specIds": "1,4,6",
            "price": "399.00",
            "sku": "",
          },
          {
            "id": 2,
            "specIds": "2,4,7",
            "price": "499.00",
            "sku": "",
          },
          {
            "id": 3,
            "specIds": "3,4,6",
            "price": "1499.00",
            "sku": "",
          },
          {
            "id": 3,
            "specIds": "3,5,7",
            "price": "1499.00",
            "sku": "",
          },
          {
            "id": 3,
            "specIds": "1,5,6",
            "price": "1499.00",
            "sku": "",
          }
        ]
			}
		},
		methods: {
      /**
       * 获取选中的sku序号,更新时被动调,主动调用请自行设置ref值,方法一致
       * @param e
       */
      getSelectedIndex(e){
			  console.info('getSelectedIndex', e)
			},
      /**
       * 获取详细的sku对象信息,更新时被动调,主动调用请自行设置ref值,方法一致
       * @param e
       */
      getSelectedSkuObj(e) {
        console.info('getSelectedSkuObj', e)
      }
		}
	}
</script>

<style lang="scss">
.container{
  padding: 40rpx;

  .title{
    font-size: 36rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
  }
}
</style>
